<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ykj
  Date: 16/1/17
  Time: 下午9:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>理财产品</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/financial.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.tab-content .item .selector .filter a').bind('click',function(){
                $(this).parent().children('a').removeClass('current');
                $(this).addClass('current');

                //ajax处理过滤
                var type = $('#typeId').find('a[class=current]').attr('data');
                var rateSpan = $('#rateSpan').find('a[class=current]').attr('data');
                var timeSpan = $('#timeSpan').find('a[class=current]').attr('data');
                $('#product-paginate').load('product/filterProduct',
                        {type:type,rateSpan:rateSpan,timeSpan:timeSpan});
            });
            $('#query-sub').click(function(){
                $('#search-form').submit();
            });
        });
    </script>
</head>
<body>
    <jsp:include page="topbar.jsp" flush="true"/>
    <div id="banner">
        <a class="banner-background-container" href="#"></a>
    </div>
    <div class="container work-panel">
        <div class="row" id="work_panel">
            <div class="col-xs-8">
                <div style="overflow: hidden">
                    <div style="float: left;"><h4>全部产品</h4></div>
                    <div style="float: right;">
                        <form id="search-form" action="index">
                            <div class="input-group">
                                <input type="text" name="query" class="form-control" id="query" placeholder="搜索产品">
                                <span class="input-group-addon"><a id="query-sub" href="javascript:void(0);"><span class="glyphicon glyphicon-search"></span></a></span>
                                <input type="submit" style="display: none;"/>
                            </div>
                            <%--<button type="submit" class="btn">Search</button>--%>
                        </form>
                    </div>
                </div>
                <div class="tabs" style="margin-top: 0px;">
                    <div class="tab-header">
                        <div class="header-content">
                            <a class="ui-tabs-anchor ui-state-active" href="#">理财产品过滤</a>
                            <%--<a class="ui-tabs-anchor" href="#">定期理财</a>--%>
                        </div>
                        <div class="header-toolbar">
                            <a id="btn-calculator" class="h5 calculator" data-toggle="modal" data-target="#calModal">
                                <strong>【理财计算器】</strong>
                            </a>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="item">
                            <span class="name">年化收益：</span>
                            <span class="selector">
                                <span class="filter" id="rateSpan">
                                    <a class="current">不限</a>
                                    <a data="0:3">3%以下</a>
                                    <a data="3:4">3-4%</a>
                                    <a data="4:6">4-6%</a>
                                    <a data="6:100">6%以上</a>
                                </span>
                            </span>
                        </div>
                        <div class="item">
                            <span class="name">投资期限：</span>
                            <span class="selector">
                                <span class="filter" id="timeSpan">
                                    <a class="current">不限</a>
                                    <a data="0:30">1个月以下</a>
                                    <a data="31:90">1-3个月</a>
                                    <a data="91:180">3-6个月</a>
                                    <a data="181:999">6个月以上</a>
                                </span>
                            </span>
                        </div>
                        <%--<div class="item">--%>
                            <%--<span class="name">起投金额：</span>--%>
                            <%--<span class="selector">--%>
                                <%--<span class="filter">--%>
                                    <%--<a class="current">不限</a>--%>
                                    <%--<a>1000元以下</a>--%>
                                    <%--<a>1000-5000元</a>--%>
                                    <%--<a>5000-10000元</a>--%>
                                    <%--<a>10000元以上</a>--%>
                                <%--</span>--%>
                            <%--</span>--%>
                        <%--</div>--%>
                        <div class="item">
                            <span class="name">产品类型：</span>
                            <span class="selector">
                                <span class="filter" id="typeId">
                                    <a class="current">不限</a>
                                    <a data="1">固定收益</a>
                                    <a data="2">定期理财</a>
                                </span>
                            </span>
                        </div>
                    </div>
                    <!-- 产品列表 start-->
                    <div class="margin-top-10">
                        <div id="product-list" class="">
                            <div class="panel panel-default">
                                <div id="product-table" class="ark-table">
                                    <div class="ark-table-header">
                                        <div class="row ark-sort-container">
                                            <div class="column-head" style="width: 40px;"></div>
                                            <div class="column-first" style="width: 80px;">排序条件：</div>
                                            <div class="column" style="width: 50px;">
                                                <a class="ark-sort-item ark-sort-item-current" data-name="default"
                                                   data-value="1">默认</a>
                                            </div>
                                            <div class="column" style="width: 90px;">
                                                <a class="ark-sort-item arrow-down-gray" data-name="interest"
                                                   data-value="1">年化收益</a>
                                            </div>
                                            <div class="column" style="width: 90px;">
                                                <a class="ark-sort-item arrow-down-gray" data-name="period"
                                                   data-value="1">投资期限</a>
                                            </div>
                                            <div class="column" style="width: 90px;">
                                                <a class="ark-sort-item arrow-down-gray" data-name="minbid"
                                                   data-value="1">起投金额</a>
                                            </div>
                                            <div class="column-last" style="width: 200px;">
                                                <input type="checkbox" id="showCanBuy" class="showCanBuy"
                                                       style="margin-top:14px">
                                            </div>
                                            <div class="column-last" style="width: 90px;">
                                                <span style="color:#ff6600"><strong>只显示在售产品</strong></span>
                                            </div>
                                            <!--
                                                            <div class="column-last w340">总共：<span class="ark-color-red">255</span>（条）</div>
                                            -->
                                        </div>
                                    </div>
                                    <div id="product-paginate">
                                        <div id="product-table-body" class="ark-table-body">
                                            <!-- output data collection -->
                                            <div class="container-fluid">
                                                <c:forEach var="product" items="${products.list}">
                                                    <div class="product-item">
                                                        <div class="row item-title">${product.name}</div>
                                                        <div class="row item-content">
                                                            <div class="col-xs-2">
                                                                <div class="item-content-value-block">
                                                                    <div>
                                                                        <span class="item-value-highlight">${product.rateReturn}</span>
                                                                        <span class="unit">%</span>
                                                                    </div>
                                                                    <div class="caption">年化收益率</div>
                                                                </div>
                                                                <div class="column-split">
                                                                    <div class="column-split-line"></div>
                                                                </div>
                                                            </div>

                                                            <div class="col-xs-2">
                                                                <div class="item-content-value-block">
                                                                    <div>
                                                                        <span class="item-value">${product.needTime}</span>
                                                                        <span class="unit">天</span>
                                                                    </div>
                                                                    <div class="caption">投资期限</div>
                                                                </div>
                                                                <div class="column-split">
                                                                    <div class="column-split-line"></div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-3">
                                                                <div class="item-content-value-block">
                                                                    <div>
                                                                        <span class="item-value">${product.alreadyMoney}</span>
                                                                        <span class="unit">元</span>
                                                                    </div>
                                                                    <div class="caption">已募资金</div>
                                                                </div>
                                                                <div class="column-split">
                                                                    <div class="column-split-line"></div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-3">
                                                                <div class="item-content-value-block">
                                                                    <div>
                                                                        <span class="item-value">${product.totalMoney}</span>
                                                                        <span class="unit">元</span>
                                                                    </div>
                                                                    <div class="caption">募资总额</div>
                                                                </div>
                                                                <div class="column-split">
                                                                    <div class="column-split-line"></div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-2"><a class="btn btn-danger"
                                                                                     href="product/detail?id=${product.id}">立即购买</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row-split">
                                                        <div class="line ark-margin-left-40 ark-margin-right-40"></div>
                                                    </div>
                                                </c:forEach>
                                            </div>
                                            <!-- end of data output -->
                                        </div>
                                        <div class="ark-table-footer">
                                            <div class="text-center">
                                                <ul class="pagination">
                                                    <li><a href="#">&laquo;</a></li>
                                                    <c:forEach begin="1" end="${products.totalPage}" varStatus="status">
                                                        <li>
                                                            <a href="?page=${status.index}&query=${query}">${status.index}</a>
                                                        </li>
                                                    </c:forEach>
                                                    <li><a href="#">&raquo;</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 产品列表 end-->
                </div>
            </div>
            <!--sidebar-->
            <div class="col-xs-4">
                <div class="sidebar-item">
                    <div><h4>新产品预告</h4></div>
                    <div class="panel panel-default margin-top-10">
                        <div style="margin: 25px;">
                            <a href="" target="_blank">
                                <span class="sidebar-newproduct-item">
                                    聚财-银行投融资项目 收益:5% 期限:21天
                                    <span style="color: red;"> 火爆抢购中！</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="sidebar-item">
                    <div><h4>我要购买</h4></div>
                    <div id="yy-panel" class="panel panel-default margin-top-10" style="border:0px;">
                        <div class="area-content">
                            <div class="cont-left">
                                <h4>购买固收 省心又方便</h4>
                                <span>金融机构或担保公司<br>本息保障 购买尊享</span>
                                <a class="btn btn-danger" target="_blank" href="#">立即购买</a>
                            </div>
                        </div>
                        <p class="area-bottom"><a target="_blank" href="">了解固收理财购买</a></p>
                    </div>
                </div>
                <div class="sidebar-item">
                    <div><h4>关于固收理财</h4></div>
                    <div class="panel panel-default margin-top-10 about" style="border:0px;">
                        <div class="area-content">
                            <ul>
                                <li>
                                    <i class="icon icon-1"></i>
                                    <div class="right">
                                        <p class="title">买买提</p>
                                        <p>用钱无忧 随时提款<a href="" target="_blank">了解详情&gt;</a></p>
                                    </div>
                                </li>
                                <li>
                                    <i class="icon icon-2"></i>
                                    <div class="right">
                                        <p class="title">稳稳赚</p>
                                        <p>金融机构或担保公司<br>本息保障 稳稳赚钱<a href="" target="_blank">了解详情&gt;</a></p>
                                    </div>
                                </li>
                                <li>
                                    <i class="icon icon-3"></i>
                                    <div class="right">
                                        <p class="title">聚财</p>
                                        <p>固定收益 AA+级以上担保<a href="" target="_blank">了解详情&gt;</a></p>
                                    </div>
                                </li>
                                <li class="last">
                                    <i class="icon icon-4"></i>
                                    <div class="right">
                                        <p class="title">月月收</p>
                                        <p>一次投资 月月赚钱<a href="" target="_blank">了解详情&gt;</a></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="f-copyright" style="position: relative; top: 0px;">
        <div class="container" style="min-width: 1200px !important;">
            <div class="col-xs-12">
                <div class="footer-nav">
                    <p>
                        <a href="" target="_blank">关于华软金融</a><span class="footer-nav-cut">|</span>
                        <a href="" target="_blank">关于华软打印室</a><span class="footer-nav-cut">|</span>
                        <a href="" target="_blank">关于华软学生卡</a><span class="footer-nav-cut">|</span>
                        <a href="" target="_blank">关于华软饭卡</a><span class="footer-nav-cut">|</span>
                        <a href="" target="_blank">联系我们</a><span class="footer-nav-cut">|</span>
                        <a href="" target="_blank">免责声明</a>
                    </p>
                    <p> Copyright © 2015-2016 华软HR.com 版权所有<span class="footer-nav-cut">|</span>投资有风险，购买需谨慎 </p>
                </div>
                <div class="footer-contact">
                    <div class="f-contact-time">联系宿舍阿姨<span>（9:00-22:00）</span></div>
                    <div class="f-contact-way"><span class="f-contact-tel">400 888 9898</span> <span
                            class="f-contact-type">(个人业务)</span>
                        <a class="f-contact-ol online" href="" target="_blank">在线舍长</a>
                        <a class="f-contact-ol f-contact-mail" href="" target="_blank">舍长邮箱</a>
                    </div>
                    <div class="f-contact-way"><span class="f-contact-tel">400 888 6868</span> <span
                            class="f-contact-type">(学院业务)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="earningCal.jsp" flush="true"/>
</body>
</html>
